<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仪表盘</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <style>
        .stat-card {
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .stat-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col">
                <h2>仪表盘</h2>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card stat-card bg-primary text-white">
                    <div class="card-body text-center">
                        <div class="stat-icon">
                            <i class="bi bi-box"></i>
                        </div>
                        <h5 class="card-title">总订单数</h5>
                        <h2 class="card-text" id="totalOrders">0</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-success text-white">
                    <div class="card-body text-center">
                        <div class="stat-icon">
                            <i class="bi bi-truck"></i>
                        </div>
                        <h5 class="card-title">运输中订单</h5>
                        <h2 class="card-text" id="transportingOrders">0</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-info text-white">
                    <div class="card-body text-center">
                        <div class="stat-icon">
                            <i class="bi bi-building"></i>
                        </div>
                        <h5 class="card-title">仓库数量</h5>
                        <h2 class="card-text" id="totalWarehouses">0</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-warning text-white">
                    <div class="card-body text-center">
                        <div class="stat-icon">
                            <i class="bi bi-people"></i>
                        </div>
                        <h5 class="card-title">用户数量</h5>
                        <h2 class="card-text" id="totalUsers">0</h2>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">最近订单</h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>订单编号</th>
                                        <th>发货人</th>
                                        <th>收货人</th>
                                        <th>状态</th>
                                        <th>创建时间</th>
                                    </tr>
                                </thead>
                                <tbody id="recentOrders">
                                    <!-- 最近订单列表 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">仓库使用情况</h5>
                    </div>
                    <div class="card-body">
                        <div id="warehouseUsage">
                            <!-- 仓库使用情况 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(function() {
            loadDashboardData();
        });

        function loadDashboardData() {
            // 加载订单统计
            $.get('/order/list', function(res) {
                if (res.code === 200) {
                    const orders = res.data;
                    $('#totalOrders').text(orders.length);
                    const transportingOrders = orders.filter(order => order.status === 1).length;
                    $('#transportingOrders').text(transportingOrders);

                    // 显示最近订单
                    const recentOrders = orders.slice(0, 5);
                    let html = '';
                    recentOrders.forEach(order => {
                        html += `
                            <tr>
                                <td>${order.orderNo}</td>
                                <td>${order.senderName}</td>
                                <td>${order.receiverName}</td>
                                <td>${getOrderStatusText(order.status)}</td>
                                <td>${new Date(order.createTime).toLocaleString()}</td>
                            </tr>
                        `;
                    });
                    $('#recentOrders').html(html);
                }
            });

            // 加载仓库统计
            $.get('/warehouse/list', function(res) {
                if (res.code === 200) {
                    const warehouses = res.data;
                    $('#totalWarehouses').text(warehouses.length);

                    // 显示仓库使用情况
                    let html = '';
                    warehouses.forEach(warehouse => {
                        const usageRate = (warehouse.usedCapacity / warehouse.totalCapacity * 100).toFixed(2);
                        html += `
                            <div class="mb-3">
                                <div class="d-flex justify-content-between mb-1">
                                    <span>${warehouse.name}</span>
                                    <span>${usageRate}%</span>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar ${getProgressBarClass(usageRate)}" 
                                         role="progressbar" 
                                         style="width: ${usageRate}%">
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    $('#warehouseUsage').html(html);
                }
            });

            // 加载用户统计
            $.get('/user/list', function(res) {
                if (res.code === 200) {
                    const users = res.data;
                    $('#totalUsers').text(users.length);
                }
            });
        }

        function getOrderStatusText(status) {
            const statusMap = {
                0: '待处理',
                1: '运输中',
                2: '已送达',
                3: '已取消'
            };
            return statusMap[status] || '未知状态';
        }

        function getProgressBarClass(usageRate) {
            if (usageRate >= 90) return 'bg-danger';
            if (usageRate >= 70) return 'bg-warning';
            return 'bg-success';
        }
    </script>
</body>
</html> 